<template>
  <div>
    <h1>请选择你喜欢的专栏</h1>

   <!-- 把v-model的值都装到数组里面 -->

   <!-- 1:label中的for属性规定了label与哪个表单元素绑定。
   for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。 -->

   <!-- 2:label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，
    浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。 -->
<form action="" >
  
  <label  v-bind:for="index" v-for="(item,index) in data" v-bind:key="index">
    <input type="checkbox"  v-bind:id="index"  v-model="arr" v-bind:value="item">
     {{item}} 
    </label> 


</form>
<br>
<!-- <span>arr: {{ checkedNames }}</span> -->
<ul>
  <li v-for="item in arr" v-bind:key="item.id">{{item}}</li>
  
  
</ul>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      data:["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      arr: [],
    };
  },
};
</script>

<style scoped></style>
